<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import { dateZhCN, NConfigProvider, zhCN } from 'naive-ui'
import hljs from 'highlight.js/lib/core'
import java from 'highlight.js/lib/languages/java'
import python from 'highlight.js/lib/languages/python'
import cpp from 'highlight.js/lib/languages/cpp'
import c from 'highlight.js/lib/languages/c'

hljs.registerLanguage('Java', java)
hljs.registerLanguage('Python', python)
hljs.registerLanguage('C++', cpp)
hljs.registerLanguage('C', c)
</script>

<template>
    <n-config-provider :date-locale="dateZhCN" :hljs="hljs" :locale="zhCN">
        <n-loading-bar-provider>
            <n-message-provider>
                <n-notification-provider>
                    <n-dialog-provider>
                        <Navbar></Navbar>
                        <main>
                            <router-view :key="$route.path" v-slot="{ Component }">
                                <transition appear mode="out-in" name="slide-fade">
                                    <component :is="Component" class="child-view"/>
                                </transition>
                            </router-view>
                        </main>
                        <Footer></Footer>
                    </n-dialog-provider>
                </n-notification-provider>
            </n-message-provider>
        </n-loading-bar-provider>

    </n-config-provider>
</template>

<style scoped>
main {
    background-color: #eeeeee;
    padding: 30px 0;
    min-height: calc(100vh - 180px);
}

</style>
